<template>
  <view class="container">
    <view class="header">
      <view class="box">
        <view>Ⅰ类</view>
        <view>数量：</view>
        <view>百分比：</view>
      </view>
      <view class="box">
        <view>Ⅲ类</view>
        <view>数量：</view>
        <view>百分比：</view>
      </view>
      <view class="box madd">
        <view>Ⅴ类</view>
        <view>数量：</view>
        <view>百分比：</view>
      </view>
      <view class="box">
        <view>Ⅱ类</view>
        <view>数量：</view>
        <view>百分比：</view>
      </view>
      <view class="box">
        <view>Ⅳ类</view>
        <view>数量：</view>
        <view>百分比：</view>
      </view>
      <view class="box small">
        <view>Ⅴ类</view>
        <view>数量：</view>
        <view>百分比：</view>
      </view>
    </view>
    <view class="index" :style="{height: wh + 'px'}">
      <map :latitude="latitude" :longitude="longitude" :markers="covers" scale="10" @markertap="showRouter" class="map"></map>
      <view class="cant">
        <view class="cants">
          <image src="../../static/my-images/069.png" @tap.stop="getpush"></image>
        </view>
        <view class="cants">
          <image src="../../static/my-images/061.png" @tap.stop="solomi"></image>
        </view>
        <view class="cants">
          <image src="../../static/my-images/068.png" @tap.stop="solohe"></image>
        </view>
      </view>
      <view class="ning" v-show="zoom">
        <u-input v-model="value" :type="type" :border="border" height="40" @click="jave = true" />
        <u-select v-model="jave" :list="list" @confirm="confirm"></u-select>
      </view>
    </view>
    <u-popup v-model="show" mode="center" :closeable="true" border-radius="14">
      <view class="trd">
        <view class="text">设备信息</view>
        <view class="didian">
          <view class="box">Ⅲ类</view>
          <view class="box">台州试点-5吾悦广场</view>
        </view>
        <view class="text">实时数据</view>
        <view class="tab">
          <u-table font-size="22">
            <u-tr>
              <u-td>化学需氧量
                <br />{{msg}}mg/L</u-td>
              <u-td>氨氮
                <br />12.90mg/L</u-td>
              <u-td>浊度
                <br />12.90mg/L</u-td>
            </u-tr>
            <u-tr>
              <u-td>溶解氧
                <br />12.90mg/L</u-td>
              <u-td>电导率
                <br />12.90mg/L</u-td>
              <u-td>酸碱度
                <br />12.90mg/L</u-td>
            </u-tr>
          </u-table>
        </view>
        <view class="nav">
          <view class="navs">
            <navigator url="../../subpkg/details/details" class="aya">详细信息</navigator>
            <image src="../../static/my-images/barchart.png" @click="getimage"></image>
          </view>
          <view class="navs">
            <navigator url="../../subpkg/video/video" class="aya bbs">实时视频</navigator>
            <image src="../../static/my-images/camera.png" @click="getbase"></image>
          </view>
        </view>
      </view>
    </u-popup>
    <u-mask :show="shod" @click="solokimi">
      <view class="zzc" v-show="soloking">
        <view class="rookic">
          <view class="moke">在线</view>
          <image src="../../static/my-images/061.png" class="theshy"></image>
          <view class="">在线： {{ad}}</view>
          <view class="">
            <u-icon name="close" size="28" class="icons"></u-icon>
          </view>
        </view>
      </view>
      <view class="heed" v-show="kingwai">
        <view class="rookic">
          <view class="moke">离线</view>
          <image src="../../static/my-images/068.png" class="theshy"></image>
          <view class="">离线： {{ad}}</view>
          <view class="">
            <u-icon name="close" size="28" class="icons"></u-icon>
          </view>
        </view>
      </view>
    </u-mask>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 当前设备的可用高度
        wh: 0,
        ad: 11,
        msg: 25.36,
        show: false,
        shod: false,
        soloking: false,
        kingwai: false,
        theyu: '',
        zoom: false,
        value: '',
        type: 'select',
        border: true,
        jave: false,
        longitude: 121.428599,
        latitude: 28.661378,
        covers: [{
          id: 1,
          iconPath: '/static/my-images/mark12.png',
          latitude: 28.661378,
          longitude: 121.428599,
          width: 20,
          height: 20
        }, {
          id: 2,
          iconPath: '/static/my-images/mark14.png',
          latitude: 30.28,
          longitude: 120.15,
          width: 20,
          height: 20
        }],
        list: [{
            value: '1',
            label: '江'
          },
          {
            value: '2',
            label: '唐三'
          },
          {
            value: '3',
            label: '小舞'
          }
        ],
      }
    },
    onLoad() {
      const sysInIf = uni.getSystemInfoSync()
      this.wh = sysInIf.windowHeight
      this.value = this.list[1].label
    },
    methods: {
      showRouter(e) {
        console.log(e.detail.markerId)
        this.zoom = false
        this.show = true
      },
      confirm(a) {
        this.value = a[0].label
        this.zoom = false
        // this.showRouter(e) 
      },
      getimage() {
        uni.navigateTo({
          url: "../../subpkg/details/details"
        })
      },
      getbase() {
        uni.navigateTo({
          url: "../../subpkg/video/video"
        })
      },
      getpush() {
        this.zoom = !this.zoom
      },
      solomi() {
        this.shod = true
        this.soloking = true
      },
      solohe() {
        this.shod = true
        this.kingwai = true
      },
      solokimi() {
        this.shod = false
        this.soloking = false
        this.kingwai = false
      }
    }
  }
</script>

<style lang="scss">
  ::v-deep .u-input {
    background-color: #ffffff;
  }
  
  .container {
    position: relative;
  }

  .zzc,
  .heed {
    position: absolute;
    width: 92%;
    top: 200px;
    left: 15px;
    right: 15px;
    padding: 10px;
    background-color: #ffffff;

    .icons {
      position: absolute;
      right: 15px;
    }
  }

  .rookic {
    display: flex;
  }

  .header {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 280rpx;
    background-image: url(../../static/my-images/block.png);
    background-size: 100%;
    margin-bottom: 3px;

    image {
      width: 100%;
      height: 280rpx;
    }

    view {
      width: 33.33%;
      height: 70px;
      font-size: 10px;
      line-height: 16px;
      // background-color: #18B566;
    }
  }

  .index {
    position: relative;
    width: 100%;
  }
  
  .ning {
    position: absolute;
    width: 150px;
    height: 30px;
    top: 120px;
    left: 50px;
  }

  .box view {
    width: 100%;
    height: 16px;
    margin-top: 5px;
    padding-left: 20px;
  }

  .header view:nth-of-type(6) {
    padding-left: 45px;
  }

  .box view:nth-of-type(1) {
    font-weight: 700;
  }

  .small {
    padding-top: 25px;

    view {
      margin: 0;
    }
  }

  .madd {
    padding-left: 30px;
  }

  .map {
    width: 100%;
    height: 100%;
  }

  .trd {
    width: 250px;
    padding: 10px;
  }

  .text {
    margin-top: 20px;
    font-size: 20px;
    font-weight: 600;
  }

  .didian {
    display: flex;
    font-size: 13px;

    .box {
      padding: 0 10px;
      height: 27px;
      line-height: 27px;
      border: 1px solid #dddddd;
    }

    .bbox {
      display: flex;
      flex-wrap: wrap;
      height: 130px;
      line-height: 27px;
      border: 1px solid #dddddd;

      .xbox {
        width: 33.33%;
        text-align: center;
        border: 1px solid #dddddd;
      }
    }
  }

  .nav {
    display: flex;
    margin: 10px 0 50px;
  }

  .navs {
    display: flex;
    align-items: center;

    image {
      vertical-align: middle;
      margin-left: 5px;
      width: 40px;
      height: 40px;
    }
  }

  .aya {
    color: #1890ff;
  }

  .bbs {
    margin-left: 10px;
  }

  .cant {
    position: absolute;
    top: 120px;
    left: 15px;
  }

  .cants {

    image {
      width: 30px;
      height: 30px;
    }
  }

  .theshy {
    width: 20px;
    height: 20px;
  }

  .moke {
    color: #ffffff;
    width: 40px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    padding: 0 7px;
    margin-right: 5px;
    background-color: #118eea;
  }
</style>
